<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 250px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        #xiaobox {
            width: 120px;
            height: 210px;
            margin-bottom: 40px;
        }

        #xiaobox p {
            height: 15px;
            line-height: 10px;
            font-size: 12px;
        }

        #xiaobox img {
            height: 120px;
            width: 120px;
        }

        #area {
            width: 200px;
            text-align: center;
            margin-top: 10px;
            position: fixed;
            top: 100px;
            left: 20px;
            border: 2px black solid;
            display: none;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="图链接" id="tu">
    <input type="text" placeholder="名字" id="nam">
    <input type="text" placeholder="库存" id="ku">
    <input type="text" placeholder="价格" id="jia">
    状态：<select id="zhuang">
        <option>1</option>
        <option>2</option>
    </select>
    <input type="text" placeholder="已售" id="shou">
    <button id="adder">添加</button><br>

    <input type="text" placeholder="要更新状态的id" id="xinid">
    状态更新至： <select id="xintai">
        <option>1</option>
        <option>2</option>
    </select>
    <button id="gengxin">更新状态</button><br>

    <div id="area">
        <input type="text" placeholder="图链接" id="tu0"><br>
        <input type="text" placeholder="名字" id="nam0"><br>
        <input type="text" placeholder="库存" id="ku0"><br>
        <input type="text" placeholder="价格" id="jia0"><br>
        状态：<select id="zhuang0">
            <option>1</option>
            <option>2</option>
        </select><br>
        <input type="text" placeholder="已售" id="shou0"><br>
        <button id="adder0">添加</button><br>
    </div>

    <input type="text" placeholder="按名称搜索" id="findname">
    <button id="finder">搜索</button>
    <button id="unfinder">取消搜索，返回原始数据</button><br>

    asc升序desc降序：<select id="updown">
        <option>asc</option>
        <option>desc</option>
    </select>
    按什么排序：<select id="typ">
        <option>price</option>
        <option>stock</option>
        <option>sold</option>
    </select>
    <input type="text" placeholder="请输入排序后要显示的数量" id="num">
    <button id="paixu">排序</button>

    <div id="box">
        <!-- <div id="xiaobox">
            <img src="">
            <p>名字</p>
            <p>id</p>
            <p>库存</p>
            <p>价格</p>
            <p>状态</p>
            <p>已售</p>
            <button>删除</button>
        </div> -->
    </div>

    <script>
        var adder = document.getElementById("adder")
        var box = document.getElementById("box")
        var tu = document.getElementById("tu")
        var nam = document.getElementById("nam")
        var ku = document.getElementById("ku")
        var jia = document.getElementById("jia")
        var zhuang = document.getElementById("zhuang")
        var shou = document.getElementById("shou")
        var xinid = document.getElementById("xinid")
        var xintai = document.getElementById("xintai")
        var gengxin = document.getElementById("gengxin")
        var area = document.getElementById("area")
        var tu0 = document.getElementById("tu0")
        var nam0 = document.getElementById("nam0")
        var ku0 = document.getElementById("ku0")
        var jia0 = document.getElementById("jia0")
        var zhuang0 = document.getElementById("zhuang0")
        var shou0 = document.getElementById("shou0")
        var adder0 = document.getElementById("adder0")
        var findname = document.getElementById("findname")
        var finder = document.getElementById("finder")
        var unfinder = document.getElementById("unfinder")
        var updown = document.getElementById("updown")
        var typ = document.getElementById("typ")
        var num = document.getElementById("num")
        var paixu = document.getElementById("paixu")
        // 渲染
        function apply() {
            var xhr = new XMLHttpRequest()
            xhr.open("GET", "https://liu.zzgoodqc.cn/goodsx/goodslist")
            xhr.send()
            xhr.onload = function () {
                var arr = JSON.parse(xhr.response).data
                box.innerHTML = ""
                arr.forEach(item => {
                    box.innerHTML += `
                    <div id="xiaobox">
                        <img src=${item.img} onclick="more(${item.id})">
                        <p>名字:${item.goods_name}</p>
                        <p>id:${item.id}</p>
                        <p>库存:${item.stock}</p>
                        <p>价格:${item.price}</p>
                        <p>状态:${item.status}</p>
                        <p>已售:${item.sold}</p>
                        <button onclick="dele(${item.id})">删除</button>
                        <button onclick="regoods(${item.id})">更新商品</button>
                    </div>`
                })
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
        }
        apply()


        // 添加
        adder.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("post", "https://liu.zzgoodqc.cn/goodsx/add")
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            var obj = {
                img: tu.value,
                goods_name: nam.value,
                stock: ku.value,
                price: jia.value,
                status: zhuang.value,
                sold: shou.value
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = function () {
                apply()
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
            tu.value = ""
            nam.value = ""
            ku.value = ""
            jia.value = ""
            shou.value = ""
        }


        // 删除
        function dele(ii) {
            var xhr = new XMLHttpRequest()
            xhr.open("GET", `https://liu.zzgoodqc.cn/goodsx/delete?id=${ii}`)
            xhr.send()
            xhr.onload = function () {
                apply()
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
        }


        // 更新状态
        gengxin.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("GET", `https://liu.zzgoodqc.cn/goodsx/updateStatus?id=${xinid.value}&status=${xintai.value}`)
            xhr.send()
            xhr.onload = function () {
                apply()
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
            xinid.value = ""
            xintai.value = ""
        }


        // 更新商品
        var idd = 0
        function regoods(iii) {
            area.style.display = "block"
            return idd = iii
        }
        adder0.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("POST", `https://liu.zzgoodqc.cn/goodsx/update?id=${idd}`)
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            var obj = {
                img: tu0.value,
                goods_name: nam0.value,
                stock: ku0.value,
                price: jia0.value,
                status: zhuang0.value,
                sold: shou0.value
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = function () {
                apply()
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
            tu0.value = ""
            nam0.value = ""
            ku0.value = ""
            jia0.value = ""
            shou0.value = ""
            area.style.display = "none"
        }


        // 按名称搜索
        finder.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("POST", `https://liu.zzgoodqc.cn/goodsx/search?goods_name=${findname.value}`)
            xhr.send()
            xhr.onload = function () {
                var arr = JSON.parse(xhr.response).data
                box.innerHTML = ""
                arr.forEach(item => {
                    box.innerHTML += `
                    <div id="xiaobox">
                        <img src=${item.img} onclick="more(${item.id})">
                        <p>名字:${item.goods_name}</p>
                        <p>id:${item.id}</p>
                        <p>库存:${item.stock}</p>
                        <p>价格:${item.price}</p>
                        <p>状态:${item.status}</p>
                        <p>已售:${item.sold}</p>
                        <button onclick="dele(${item.id})">删除</button>
                        <button onclick="regoods(${item.id})">更新商品</button>
                    </div>`
                })
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
            findname.value = ""
        }

        // 取消搜索
        unfinder.onclick = function () {
            apply()
        }

        // 排序
        paixu.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("GET", `https://liu.zzgoodqc.cn/goodsx/sort?sort=${updown.value}&type=${typ.value}&page=1&limit=${num.value}`)
            xhr.send()
            xhr.onload = function () {
                var arr = JSON.parse(xhr.response).data
                box.innerHTML = ""
                arr.forEach(item => {
                    box.innerHTML += `
                    <div id="xiaobox">
                        <img src=${item.img} onclick="more(${item.id})">
                        <p>名字:${item.goods_name}</p>
                        <p>id:${item.id}</p>
                        <p>库存:${item.stock}</p>
                        <p>价格:${item.price}</p>
                        <p>状态:${item.status}</p>
                        <p>已售:${item.sold}</p>
                        <button onclick="dele(${item.id})">删除</button>
                        <button onclick="regoods(${item.id})">更新商品</button>
                    </div>`
                })
            }
            xhr.onerror = function (e) {
                console.log(e);
            }
        }


        // 详情信息
        function more(iiii) {
            localStorage.setItem("id", iiii)
            location.assign("./详情界面.html")
        }
    </script>
</body>

</html>